<template>
	<view>
		<u-navbar title-size="34" :title="title"  back-icon-color="#292940" title-color="#292940" :border-bottom="false" :custom-back="tui.goBack" placeholder></u-navbar>
		<view class="capital-container" v-show="Stage == 1">
		 	<view class="pl text-292940 fz-48 font-weight-600">获取验证码</view>
			<view class="pl capital-tip text-999BA8 fz-26">请输入验证码，用于身份验证</view>
			<u-message-input  maxlength="6" inactive-color="#E0E5EA" active-color="#1EF7FE"
			@change="change" @finish="finish1"  width="88" :focus="Stage == 1" :value="verification_code"></u-message-input>
		</view>
		<view class="capital-container" v-show="Stage == 2">
		 	<view class="pl text-292940 fz-48 font-weight-600">请设置新资金密码</view>
			<view class="pl capital-tip text-999BA8 fz-26">请设置新资金密码，用于支付验证</view>
			<u-message-input maxlength="6" inactive-color="#E0E5EA" active-color="#1EF7FE"  
			@change="change" @finish="finish2"  width="88" :focus="Stage == 2" :value="password"></u-message-input>
		</view>
		<view class="capital-container" v-show="Stage == 3">
		 	<view class="pl text-292940 fz-48 font-weight-600">请确认新资金密码</view>
			<view class="pl capital-tip text-999BA8 fz-26">请再次输入，以确认密码</view>
			<u-message-input  maxlength="6" inactive-color="#E0E5EA" active-color="#1EF7FE"
			@change="change" @finish="finish3"  width="88" :focus="Stage == 3" :value="password_confirmation"></u-message-input>
		</view>
		<u-verification-code seconds="60" @end="end" changeText="Xs获取" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
		<span class="get-code" @tap="getCode" v-if="Stage == 1">{{tips}}</span>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				verification_code:'',
				password:'',
				password_confirmation:'',
				Stage:1,
				tips:'发送验证码'
			}
		},
		computed: {
			USER(){
				return this.$store.state.auth.USER
			},
			title(){
				if(this.USER.has_second_password){
					return '修改资金密码'
				}
				return '设置资金密码'
			}
		},
		methods: {
			end(){},
			start(){},
			change(e) {
			},
			finish1(e) {
				this.verification_code = e
				this.Stage = 2
			},
			finish2(e) {
				this.password = e
				this.Stage = 3
			},
			finish3(e) {
				this.password_confirmation = e
				if(this.password !== this.password_confirmation){
					uni.$u.toast('两次密码不一致，请重新输入')
					setTimeout(()=>{
						this.password = ''
						this.password_confirmation = ''
						this.Stage = 2
					},500)
				}else{
					this.setPayPwd()
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					this.$store.dispatch('auth/smsSendOwn', { mobile: this.USER.mobile }).then(res => {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch(error => {
						uni.$u.toast(error.data.message)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			setPayPwd(){
				let param = {
					verification_code:this.verification_code,
					second_password:this.password,
					second_password_confirmation:this.password_confirmation,
				}
				this.$store.dispatch('auth/passwordSecond',param).then(res=>{
					uni.$u.toast('修改成功')
					this.$store.dispatch('auth/user').then(res => {
						setTimeout(()=>{
							this.tui.goBack()
						},1000)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.capital-container{
		width: 100%;
		padding: 106upx 60upx 0 ;
		box-sizing: border-box;
	}
	.pl{
		padding-left: 28upx;
	}
	/deep/.u-char-item{
		margin:6upx;
	}
	/deep/.u-box{
		color:#292940;
	}
	.capital-tip{
		margin: 26upx 0 60upx 0;
	}
	.item {
		height: 182upx;
		box-sizing: border-box;
		padding-top: 50upx;
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
		position: relative;
	}
	
	.input-box {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		text-align: left;
		margin-top: 10upx !important;
	
		input {
			height: 84upx;
			width: calc(100% - 180upx) !important;
			font-size: 32upx;
			
		}
		/deep/.uni-input-input{
			color: #CCCDD5;
		}
		
	}
	.eye-style{
		position: absolute;
		right:0;
		top:128upx;
		.eye-img {
			width: 32upx;
			height: 32upx;
		}
	}
	
	.u-border-bottom {
		border-color: #eeeeee !important;
	}
	.get-code{
		display: block;
		margin:  60upx auto;
		text-align: center;
		color:#00D7FF;
		font-size: 28upx;
	}
	// .get-code{
	// 	position: absolute;
	// 	right: 0;
	// 	top: 77%;
	// 	transform: translateY(-50%);
	// 	color: #292940;
		
	// }
	// .code-box{
	// 	padding: 30upx;
	// }
</style>